
const toggleBtn = document.querySelectorAll('.zl');
const detailModal = document.getElementById('detailModal');
const closeBtn = document.getElementById('closeBtn');
const followButton = document.getElementById('follow');
const followButtons = document.getElementById('follows');

// 显示详细信息
if (toggleBtn.length > 0 && detailModal && closeBtn) {
    // 遍历所有匹配的按钮，为每个按钮添加点击事件监听器
    toggleBtn.forEach(function (button) {
        button.addEventListener('click', function () {
            if (detailModal.style.display === 'none' || detailModal.style.display === '') {
                detailModal.style.display = 'block';
                this.textContent = '收起详细信息';
                document.body.classList.add('modal-open');
            } else {
                detailModal.style.display = 'none';
                this.textContent = '显示详细信息';
                document.body.classList.remove('modal-open');
            }
        });
    });
    closeBtn.addEventListener('click', function () {
        detailModal.style.display = 'none';
        // 遍历所有按钮，将文本重置为显示详细信息
        toggleBtn.forEach(function (button) {
            button.textContent = '显示详细信息';
        });
        document.body.classList.remove('modal-open');
    });
}

//关注
if (followButtons) {
    console.log('初始类名:', followButtons.className);
    followButtons.addEventListener('click', function () {
        console.log('点击时类名:', this.className);
        if (this.classList.contains('follows')) {
            this.textContent = '已关注';
            this.classList.replace('follows', 'unfollows');
        } else {
            this.textContent = '+关注他';
            this.classList.replace('unfollows', 'follows');
        }
        console.log('点击后类名:', this.className);
    });

    followButtons.addEventListener('mouseover', function () {
        if (this.classList.contains('unfollows')) {
            this.textContent = '取消关注';
        }
    });

    followButtons.addEventListener('mouseout', function () {
        if (this.classList.contains('unfollows')) {
            this.textContent = '已关注';
        }
    });
}

if (followButton) {
    console.log('初始类名:', followButton.className);
    followButton.addEventListener('click', function () {
        console.log('点击时类名:', this.className);
        if (this.classList.contains('follow')) {
            this.textContent = '已关注';
            this.classList.replace('follow', 'unfollow');
        } else {
            this.textContent = '+关注他';
            this.classList.replace('unfollow', 'follow');
        }
        console.log('点击后类名:', this.className);
    });

    followButton.addEventListener('mouseover', function () {
        if (this.classList.contains('unfollow')) {
            this.textContent = '取消关注';
        }
    });

    followButton.addEventListener('mouseout', function () {
        if (this.classList.contains('unfollow')) {
            this.textContent = '已关注';
        }
    });
}
//举报
document.addEventListener('DOMContentLoaded', function () {
    const reportButton1 = document.getElementById('report1');
    const reportButtons = document.querySelectorAll('.report');
    const reportModal = document.getElementById('reportModal');
    const closeButton2 = document.querySelector('.close2');
    const submitReportButton = document.getElementById('submitReport');
    const reportTypeButtons = document.querySelectorAll('.report-type');

    // 打开模态框的函数
    function openReportModal() {
        reportModal.style.display = 'block';
    }

    // 关闭模态框的函数
    function closeReportModal() {
        reportModal.style.display = 'none';
        resetReportButtons();
    }

    // 重置举报类型按钮和提交按钮状态的函数
    function resetReportButtons() {
        reportTypeButtons.forEach(button => button.classList.remove('active'));
        submitReportButton.classList.remove('active');
        submitReportButton.disabled = true;
    }

    // // 为 reportButton1 绑定点击事件
    // reportButton1.addEventListener('click', openReportModal);

    // 为所有类名为 report 的按钮绑定点击事件
    reportButtons.forEach(button => {
        button.addEventListener('click', openReportModal);
    });

    // // 为关闭按钮绑定点击事件
    // closeButton2.addEventListener('click', closeReportModal);

    // 点击模态框外部关闭模态框
    window.addEventListener('click', function (event) {
        if (event.target === reportModal) {
            closeReportModal();
        }
    });

    // 为举报类型按钮绑定点击事件
    reportTypeButtons.forEach(button => {
        button.addEventListener('click', function () {
            reportTypeButtons.forEach(otherButton => otherButton.classList.remove('active'));
            this.classList.add('active');
            submitReportButton.classList.add('active');
            submitReportButton.disabled = false;
        });
    });

    // // 初始时禁用提交按钮
    // submitReportButton.disabled = true;

    // 为提交按钮绑定点击事件
    submitReportButton.addEventListener('click', function () {
        if (!this.disabled) {
            alert('举报已提交');
            closeReportModal();
        }
    });
});
//切换动态，文章，专栏.....
const actionItems = document.querySelectorAll('.tap .icon li'); // 假设.tap 是包含导航栏的父元素类名
const listItems = document.querySelectorAll('.tap li:not(.icon li)');
const contentBoxes = document.querySelectorAll('.dongtai, .talks, .questions, .article, .idea, .video, .collect, .attention');
console.log('listItems数量:', listItems.length);
const questionContainer = document.querySelector('.question-container');
console.log('contentBoxes数量:', contentBoxes.length);


// 事件委托在父元素上
const parentUl = document.querySelector('ul.icon');
parentUl.addEventListener('click', (event) => {
    const target = event.target;
    if (target.tagName === 'LI') {
        if (target.id ==='report') {
            // 举报按钮逻辑
            const reportModal = document.getElementById('reportModal');
            if (reportModal) {
                reportModal.style.display = 'block';
            }
        } else {
            // 其他“赞同”“评论”等按钮逻辑，可按需添加
        }
    }
});
const boxa = document.querySelector('ul.icon');
listItems.forEach((item, index) => {
    item.addEventListener('click', () => {
        // 移除所有 li 的 active 类
        listItems.forEach((li) => {
            li.classList.remove('active');
        });
        // 隐藏所有内容盒子
        contentBoxes.forEach((box) => {
            box.style.display = 'none';
        });
        questionContainer.style.display = 'none';

        // 给当前点击的 li 添加 active 类
        item.classList.add('active');
        // 根据点击的 li 的索引，显示对应的内容盒子
        const targetBoxIndex = index;
        const targetBox = contentBoxes[targetBoxIndex];
        if (targetBox) {
            targetBox.style.display = 'block';
            if (targetBox.classList.contains('dongtai')) {
                questionContainer.style.display = 'block';
            }
        }
    });
});
const clickableItems = document.querySelectorAll('.icon1.action-item.clickable');
clickableItems.forEach(item => {
    item.addEventListener('click', function () {
        this.classList.toggle('clicked');
    });
});
//关注的人
document.addEventListener('DOMContentLoaded', function () {
    // 获取所有的选项卡元素
    const tabItems = document.querySelectorAll('.tab-item');
    // 获取所有的内容项元素
    const contentItems = document.querySelectorAll('.content-item');

    // 为每个选项卡元素添加点击事件监听器
    tabItems.forEach((tabItem, index) => {
        tabItem.addEventListener('click', function () {
            // 移除所有选项卡的 active 类
            tabItems.forEach(item => item.classList.remove('active'));
            // 为当前点击的选项卡添加 active 类
            this.classList.add('active');

            // 移除所有内容项的 active 类
            contentItems.forEach(item => item.classList.remove('active'));
            // 为对应的内容项添加 active 类
            contentItems[index].classList.add('active');
        });
    });
});
document.addEventListener('DOMContentLoaded', function () {
    const readmoreList = document.querySelectorAll('.read-more');

    readmoreList.forEach((readmore, index) => {
        const yincangwenzi = document.querySelectorAll('.yc-word')[index];
        const souqi = document.querySelectorAll('.suouoqi')[index];
        const point = document.querySelectorAll('.point')[index];

        if (yincangwenzi && souqi && point) {
            const yincangwenziText = yincangwenzi.textContent;
            const initialPointText = point.textContent;

            readmore.addEventListener('click', function () {
                readmore.style.display = 'none';
                point.textContent = yincangwenziText;
                souqi.style.display = 'block';
            });

            souqi.addEventListener('click', function () {
                readmore.style.display = 'block';
                point.textContent = initialPointText;
                souqi.style.display = 'none';
            });
        }
    });
});
let write_article=document.getElementsByClassName('write-article')[0]
write_article.addEventListener('click',()=>{
    window.location.href='/postArticle'
})
let write_vedio=document.getElementsByClassName('write-vedio')[0]
write_vedio.addEventListener('click',()=>{
    window.location.href='/vedio'
})
let mainPage=document.getElementsByClassName('mainPage')[0]
mainPage.addEventListener('click',()=>{
    event.preventDefault();
    window.location.href='/creativeCenter'
})
const mask=document.querySelector('.mask')
const titleInput = document.getElementById('titleInput');
const titleCharCount = document.getElementById('titleCharCount');
const contentTextarea = document.getElementById('contentTextarea');
const contentCharCount = document.getElementById('contentCharCount');
const closeButton = document.getElementById('closeButton');
const writeThought=document.getElementsByClassName('write-thought2')[0]
const writeThought_button=document.getElementsByClassName('write-thought')[0]
// 标题字数统计
titleInput.addEventListener('input', function () {
    const charCount = titleInput.value.length;
    titleCharCount.textContent = charCount + '/50';
});
contentTextarea .addEventListener('input',function(){
    const charCount=contentTextarea.value.length
    contentCharCount.textContent=charCount+'/300'
})

closeButton.addEventListener('click',()=>{
    console.log(closeButton)
    writeThought.style.display='none'
    contentTextarea.value=''
    titleInput.value=''
    document.body.classList.remove('open')
    mask.style.display='none'
})
writeThought_button.addEventListener('click',()=>{
    writeThought.style.display='block'
    mask.style.display='block'

    document.body.classList.add('open')
})

function showCustomAlert(message, duration) {
    let customAlert = document.getElementById('customAlert');
    if (!customAlert) {
        div_outter = document.createElement('div');
        customAlert = document.createElement('div');
        customAlert.id = 'customAlert';
        // customAlert.style.margin='7px 12px';
        const alertMessage = document.createElement('p');
        alertMessage.id = 'alertMessage';
        customAlert.appendChild(alertMessage);

        document.body.appendChild(customAlert);
    }

    const alertMessage = document.getElementById('alertMessage');

    alertMessage.textContent = message;
    if (alertMessage.textContent == null) {
        customAlert.style.display = 'none';
    }

    customAlert.style.display = 'block';
    setTimeout(() => {
        customAlert.style.display = 'none';
    }, duration);
}

